<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="../../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../../../jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="../../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>

<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>客户服务分析</h3>
        </div>
    </div>
</div>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>

<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">年份</div>
            <select class="form-control" id="chart-service-year">
                <option>2021</option>
                <option>2020</option>
                <option>2019</option>
            </select>
        </div>
    </div>

    <button type="submit" class="btn btn-default" id="searchBtn">查询</button>

</form>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td>编号</td>
                    <td>条目</td>
                    <td>服务数量</td>
                </tr>
                </thead>
                <tbody id="serviceBody">

                </tbody>
            </table>
        </div>

    </div>

</div>
<script type="text/javascript">
    $(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        $("#searchBtn").click(function () {
            alert("我被点击了"+$.trim($("#chart-service-year").val()));
            getData();
        });

        getData();

        function getData() {
            $.ajax({

                url: "/chart/service/init/"+$.trim($("#chart-service-year").val()),
                type: "get",
                dataType: "json",
                success: function (data) {

                    var html = "";
                    var chartJson = [];

                    //每一个n就是每一个市场活动对象
                    $.each(data, function (i, n) {

                        html += '<tr class="active">';
                        html += '<td>' + n.cstTypeId + '</td>';
                        html += '<td>' + n.typeName + '</td>';
                        html += '<td>' + n.total + '</td>';
                        html += '</tr>';

                        var obj = new Object();
                        obj.value = n.total;
                        obj.name = n.typeName;
                        chartJson.push(obj);

                    });


                    myChart.setOption({
                        series : [
                            {
                                name: '访问来源',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data:chartJson
                            }
                        ]
                    });

                    $("#serviceBody").html(html);

                }});
        }


    });
</script>
</body>
</html>